<template>
    <div class="helpCenter">
        <x-header :left-options="{showBack: true,backText:'帮助中心'}" class="headerBox"></x-header>
        <div class='topInfo'>
            <router-link to="">
                <img src='../assets/images/assistance06.png'/>
                <div>智能客服</div>
            </router-link>
            <router-link to="">
                <img src='../assets/images/assistance07.png' />
                <div>意见反馈</div>
            </router-link>
        </div>
        <!--  -->
        <div class='helpMenu' v-for="(item, index) in items" :key="index">
            <div class='helpTitle'>{{item.title}}</div>
            <router-link to="" class='helpList' v-for="(list, indexl) in item.lists" :key="indexl">
                <span class='leftTxt'>
                    <img :src='list.listIcon'/>
                    <span>{{list.listTitle}}</span>
                </span>
                <img src='../assets/images/icon-more03.png' class='more'/>
            </router-link>
        </div>
    </div>
</template>

<script>
    import { XHeader,  } from "vux";
    export default {
        components:{
            XHeader,
        },
        data(){
            return{
                items: [
                    {
                        title: '流程指引',
                        lists: [
                            {
                                listIcon: require('../assets/images/assistance04.png'),
                                listTitle: '新手指引'
                            },
                            {
                                listIcon: require('../assets/images/assistance05.png'),
                                listTitle: '注册指引'
                            },
                            {
                                listIcon: require('../assets/images/assistance02.png'),
                                listTitle: '充值指引'
                            }
                        ]
                    },
                    {
                        title: '常见问题',
                        lists: [
                            {
                                listIcon: require('../assets/images/assistance03.png'),
                                listTitle: '如何购买付费点播课程？'
                            },
                            {
                                listIcon: require('../assets/images/assistance03.png'),
                                listTitle: '如何购买付费点播课程？如何购买付费点播课程？'
                            },
                            {
                                listIcon: require('../assets/images/assistance03.png'),
                                listTitle: '如何购买付费点播课程？'
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
.helpCenter{
    /deep/.headerBox {
        background-color: #fff;
        border-bottom: 1px solid #eee;
        .vux-header-left {
            left: 24px;
            .vux-header-back {
                color: #000;
            }
            .left-arrow:before {
                border-color: #000;
            }
        }
        .vux-header-title {
            color: #000;
            font-size: 30px;
        }
    }
    .topInfo{
        background: #fff;
        padding: 30px; 
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        font-size: 30px;
        border-bottom: 20px solid #f8f9fa;
        a{
            color: #333;
        }
        img{
            width: 100px;
            height: 100px;
        }
    }

    .helpMenu{
        background: #fff;
        padding: 0 30px;
        .helpTitle{
            font-size: 30px;
            padding: 20px 20px 0; 
            position: relative;
            &::before{
                content: "";
                position: absolute;
                top: 32px;
                left: 0;
                width: 4px;
                height: 26px;
                background: #2C90F6;
            }
        }
        .helpList{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 0;
            border-bottom: 1px solid #e6e6e6;
            color: #333;
            .leftTxt{
                flex:0 0 90%;
                display: flex;
                img{
                    width: 32px;
                    height: 32px;
                    margin-top: 5px;
                }
                span{
                    font-size: 30px;
                    margin-left: 20px;
                } 
            } 
            .more{
                width: 25px;
                height: 25px;
            }
        }
    }
        
        
}
</style>